import React from 'react';
import {Row, Col, Card, Icon, Tooltip, Modal, Input, Select,message} from 'antd';
import { connect } from 'dva';
import './index.css';
import { getVisitedList, putInfoVisit } from '../../services/api';
import { supplement } from '../../utils/util';
class Service extends React.Component {
	state = {
		dataSource: [],
		chooseArr: {'c807c2e1b1d14e198f7f8d034f370d21': '满意','33dcdc15b974412b9f5074aae0cc8666': '一般', '94617ed52d5e429e8d25c1da8cecb8ee': '不满意'},
		contrast: {'满意': 'c807c2e1b1d14e198f7f8d034f370d21' ,'一般': '33dcdc15b974412b9f5074aae0cc8666' , '不满意': '94617ed52d5e429e8d25c1da8cecb8ee' }
	};

	componentDidMount() {
		this.getVisitData();
	}

	// 获取回访数据
	async getVisitData() {
		const response = await getVisitedList();
		if (response.code === 200) {
			if (response.data) {
				if(response.data.length <= 0){
					message.warning('暂无回访数据')
				}
				this.setState({
					dataSource: response.data
				});
			}
		} else {
			response.msg && message.error(response.msg);
		}
	}

	// 保存修改数据
	async saveData(fid) {
		if (!this.state[`content${fid}`] || (this.state[`content${fid}`] && this.state[`content${fid}`].trim().length === 0)) {
			message.warning('评价内容不能为空');
			return ;
		}
		if (!this.state[`evaluate${fid}`] || (this.state[`evaluate${fid}`] && this.state[`evaluate${fid}`].trim().length === 0)) {
			message.warning('请选择评价等级');
			return ;
		}
		let content = this.state[`content${fid}`]; // 评价内容
		let level = this.state[`evaluate${fid}`]; // 等级值
		const response = await putInfoVisit({fId:fid,fSatisfaction:level,fRemarks:content});
		if(response.code === 200){
			this.getVisitData();
			message.info('服务评价成功,已关闭该服务')
		} else {
			response.msg && message.error(response.msg)
		}
	}

	render() {
		const diffNum = supplement(this.props.width, 420, this.state.dataSource.length);
		let finalValue = [...this.state.dataSource];
		for(let i = 0; i < diffNum; i++) {
			finalValue.push({type: true});
		}
	     
		return (
			
			<div style={{display: 'flex',flexWrap: 'wrap',justifyContent: 'space-around'}}>
				{
					this.state.dataSource.length > 0 ? 
					finalValue.map((item, index)=> {
						return (
							<Card key={index} className={['service-cardDiv', item.type ? 'service-seizeSeat' : '']} >
								<Row style={{marginBottom: '1em'}}>
									<b>待评价服务: </b>
								</Row>
								<Row style={{marginBottom: '1em'}}>
									<Col span={11}>
										<div className='imgDiv'>
										  <img src={`${item.fPhone1}`} style={{width:'100%',height:'100%'}}/>
										</div>
									</Col>
									<Col span={11} push={2}>
										<div className='imgDiv'>
										  <img src={`${item.fPhone2}`} style={{width:'100%',height:'100%'}}/>
										</div>
									</Col>
								</Row>
								<Row style={{marginTop: 8}}>
									<Col span={11}>
										<p>老人姓名: {item.fElderlyName}</p>
										<p>服务人姓名: {item.fStaffName}</p>
										<p>服务内容: {item.fServiceType}</p>
									</Col>
									<Col span={11} push={2}>
										<p>老人电话: {item.fElderlyPhone}</p>
										<p>服务人电话: {item.fStaffPhone}</p>
										<p>下次服务内容: {item.fChangedTypeName}</p>										
									</Col>
								</Row>
								<Row>
								<Col span={3} style={{width:'16%'}}>服务评价:</Col> 
								<Col push={1} span={20}>
								{/* <div>服务评价:&nbsp;  */}
											{
												!this.state[`${item.fId}Edit`] ?
												<span>{item.fSatisfactionName}</span> :
												<Select size="small" style={{width: '93%'}} onChange={(e)=>this.setState({[`evaluate${item.fId}`]: e})} value={this.state[`evaluate${item.fId}`]}>
													{Object.keys(this.state.chooseArr).map((data)=>{
														return (
															<Select.Option key={data} value={data}>{this.state.chooseArr[data]}</Select.Option>
														)
														
													})}
												</Select>
											}
										</Col> 
								</Row>
								<Row style={{marginTop:'1em'}}>
									<Col span={3} style={{width:'10%'}}>备注:</Col> 
									<Col push={1} span={20}>
										{
											!this.state[`${item.fId}Edit`] ?
											<span>{item.fRemarks}</span> :
											<Input.TextArea 
												value={this.state[`content${item.fId}`]}
												autosize={{minRows: 2, maxRows: 6 }} 
												style={{width:'100%'}}
												onChange={(e)=>this.setState({[`content${item.fId}`]: e.target.value.trim().length > 100? e.target.value.trim().substring(0, 100): e.target.value.trim()})}/> }
									</Col>
								</Row>
								<div className='service-operate-panel'>
									{!this.state[`${item.fId}Edit`] ?
										<Tooltip title="修改">
											<Icon 
												type="form"
												style={{fontSize: 20, marginTop: 5}}
											 	onClick={() => {this.setState({[`${item.fId}Edit`]: true, [`evaluate${item.fId}`]: this.state.contrast[item.fSatisfaction], [`content${item.fId}`]: item.fRemarks})}}
											/>
										</Tooltip> :
										<div>
											<Tooltip title="保存">
												<Icon type="save"	style={{fontSize: 20,marginTop: 5}} onClick={() => this.saveData(item.fId)}/>
											</Tooltip>
											<Tooltip title="取消">
												<Icon type="rollback" style={{fontSize: 20,marginTop: 5}} onClick={() => this.setState({[`${item.fId}Edit`]: false})}/>
											</Tooltip>
										</div>}
								</div>
							</Card>
						);
					}) 
					: <p style={{textAlign: 'center',marginTop: '30%'}}>暂无数据</p>
				} 
			</div>
		)
	}
}

export default connect((state) => ({
	width: state.example.width,
	serviceType: state.example.serviceType
}))(Service);